import { useEffect, useState } from 'react';
import { Message, Input, Form, Box, Button, Card, DatePicker, Radio, Upload, Table, Rating } from '@alifd/next';
import type { UploadProps } from '@alifd/next/types/upload';
import { Moment } from 'moment';
import styles from './index.module.css';
import TextAreaWithErrorTip from '../TextAreaWithErrorTip';


const FormItem = Form.Item;

export const ChangjingTable = (props: {
    dataSource: any
    flow: any[]
    title: any
    onChange: any
}): JSX.Element => {
    // let temp = props.dataSource;
    // try {
    //     temp = JSON.parse(temp);
    //     temp = temp.map(item => {
    //         console.log(item, '=---------------');
    //         let result = {};
    //         item.reduce((result, item2) => {
    //             result[item2.key] = item2.text
    //             return result;
    //         }, result)
    //         return result;
    //     })
    //     console.log(temp, '--------------------=================');
    // } catch(e) {}
    // console.log(temp);
    const [columns, setColumns] = useState<any>([
        {
            key: 'title',
            text: props.title,
        }
    ]);

    const [dataSource, setDataSource] = useState<any[]>();
    useEffect(() => {
        let temp = props.dataSource || [];
        try {
            temp = JSON.parse(temp);
            temp = temp.map(item => {
                let result = {};
                item.reduce((result, item2) => {
                    result[item2.key] = item2.text
                    return result;
                }, result)
                return result;
            })
        } catch (e) { }
        let newColumn = [];
        let newDataSources = props.flow.map(item => {
            return {
                title: item.text
            }
        });
        temp.forEach((item, index) => {
            let columnIndex = index + 1;
            newColumn.push({
                key: columnIndex,
                text: item.title
            });

            props.flow.forEach((item2, index) => {
                newDataSources[index] = {
                    ...newDataSources[index],
                    [columnIndex]: item[item2.key]
                }
            });
        });
        setColumns([...columns, ...newColumn]);
        setDataSource(newDataSources);
    }, []);
    const onChange = (columns, dataSource) => {
        let result = [];
        result = columns.slice(1).map((columnItem, columnIndex) => {
            let result: any = {
                title: columnItem.text
            };
            dataSource.forEach((item, index) => {
                result[props.flow[index].key] = item[columnItem.key];
            });
            return result;
        });
        props.onChange && props.onChange(result);
    }
    return <>
        <Table
            key={"title"}
            dataSource={dataSource}>
            {
                columns.map((item, columnIndex) => {
                    let crateEditInput = (index, value) => {
                        return <TextAreaWithErrorTip defaultValue={value} onChange={(value1) => {
                            // let extraInfo = props.extraInfo;
                            dataSource[index] = {
                                ...dataSource[index],
                                [item.key]: value1,
                            }
                            setDataSource([...dataSource]);
                            onChange(columns, dataSource);
                        }}></TextAreaWithErrorTip>
                    }
                    return <Table.Column style={{
                        width: columnIndex == 0 ? '200px' : 'auto'
                    }} title={(...args) => {
                        if (item.key == 'title') {
                            return <div>
                                {props.title}
                                <Button onClick={() => {
                                    columns.push({
                                        key: columns.length,
                                        text: '新场景' + columns.length
                                    });
                                    setColumns([...columns]);
                                    onChange(columns, dataSource);
                                    // props.columnConfig.reduce((result, item, key) => {
                                    //     result[item.key] = '';
                                    //     return result;
                                    // }, result);
                                    // dataSource.push({
                                    //     title: '',
                                    //     ...result
                                    // });
                                    // setDataSource([...dataSource]);
                                }}>添加</Button>
                            </div>;
                        } else {
                            return <TextAreaWithErrorTip onBlur={(e) => {
                                let value = e.target.value;
                                if (value.trim() == '') {
                                    columns.splice(columnIndex, 1);
                                    setColumns([...columns]);
                                    onChange(columns, dataSource);
                                }
                            }} defaultValue={item.text} onChange={(value1) => {
                                // let extraInfo = props.extraInfo;
                                columns[columnIndex] = {
                                    ...columns[columnIndex],
                                    [item.key]: value1,
                                }
                                setColumns([...columns]);
                                onChange(columns, dataSource);
                            }}></TextAreaWithErrorTip>
                        }
                    }} dataIndex={item.key} cell={(value, index, column) => {
                        if (columnIndex == 0) {
                            return value;
                        } else {
                            return crateEditInput(index, value);
                        }
                    }} />
                })
            }
        </Table>
    </>;
};

export default ChangjingTable;
